<template>
	<view class="gastrology">
		<view class="week">
			<view class="week-day" v-for="(v,i) in dateList.dateName" :key="v">
				<text>{{i+1}}</text>
				<view @click="changeDate(v)" :data-set="v" class="data" :class="date == v ? 'active' : ''">
					{{ v.substring(8) }}
				</view>
			</view>
		</view>
		<view class="doctor">坐诊医生</view>
		<view class="doctor-box" v-for="v in doctorInfoData.doctorDataData" :key="v.skill">
			<view class="doctor-top">
				<image src="../../../static/images/logo.png"></image>
				<view class="content" @click="goDoctorInfo(v)">
					<view>
						{{ v.doctorName }}
						<text>{{ v.title }}</text>
					</view>
					<text>{{ v.skill }}</text>
				</view>
			</view>
			<view class="doctor-bottom">
				<view class="end">
					<text class="price">￥{{v.fee}}</text>
					<button @click="toggle(v.doctorName,v)" class="remain">剩余{{v.availableNumber}}</button>
				</view>

			</view>
		</view>
		<uni-popup ref="popupCoupon" type="bottom" background-color="#fff">
			<view class="title">选择预约时间段</view>
			<view class="tag">上午号源</view>
			<view class="before" >
				<view class="box" @click="goConfirmReserveInfo(v)" v-for="v in timeData.timeDataAm" :key="v.time">
					{{v.time}} {{v.num}}
				</view>
			</view>
			<view class="tag">下午号源</view>
			<view class="before">
				<view class="box"  @click="goConfirmReserveInfo(v)" v-for="v in timeDataData.timeDataPm" :key="v.time">{{v.time}} {{v.num}}</view>
			</view>

		</uni-popup>

	</view>
</template>

<script setup>
	import {
		selPersonStore
	} from '@/store/appReStore.js'
	import {
		weekDay,
		doctorInfo,
		dateSel
	} from '@/api/AppointmentRegisterAPI.js'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	let date = ref('')
	let type = ref('center')
	let dateList = reactive({
		dateName: []
	})
	let personData = reactive([])
	let dateData = reactive({})
	let dataSel = reactive([])
	let doctorNames = ref('');
	// 医生
	let doctorInfoData = reactive({
		doctorDataData: []
	});
	// 上午
	let timeData = reactive({
		timeDataAm: []
	});
	// 下午
	let timeDataData = reactive({
		timeDataPm: []
	});
	const gasyData = selPersonStore();
	// 点击改变日期
	let changeDate = v => {
		date.value = v;
		changeTime();
	}
	let popupCoupon = ref(null)
	let toggle = (name,v) => {
		const doctor = selPersonStore();
		doctor.selDoctorData=v;
		doctorNames.value = name;
		popupCoupon.value.open('bottom')
	}

	// 获取星期
	weekDay().then(({
		data
	}) => {
		if (data.msg == 'success') {
			dateList.dateName = data.data.weekDays;
			date.value = data.data.today;
		}
	}).catch((err) => {
		console.log(err);
	})
	
	// 时间点选择和剩余量
	const changeTime = ()=>{
		dateSel(
			{
				doctorName: doctorNames.value,
				workDate: date.value
			}
		).then((res) => {
			console.log('res2',res)
			if (res.data.msg == 'success') {
				timeData.timeDataAm = res.data.data.am;
				timeDataData.timeDataPm = res.data.data.pm;
			}
		}).catch((err) => {
			console.log(err)
		})
	}
	// 跳转到确认预约信息
	const goConfirmReserveInfo = (v) => {
		const dateSel = selPersonStore();
		dateSel.selDateData = v
		uni.navigateTo({
			url: '/pages/appointmentRegister/confirmAppointment/confirmAppointment'
		})
	}

	// 医生信息
	doctorInfo({
		departmentName: gasyData.selRoomData.departmentName,
		day: date.value
	}).then(({
		data
	}) => {
		if (data.msg == 'success') {
			doctorInfoData.doctorDataData = data.data.doctors;
			console.log('医生信息', doctorInfoData.doctorDataData);
		}
	}).catch((err) => {
		console.log(err)
	})
	// 跳转到医生信息
	let goDoctorInfo = (v) => {
		const doctor = selPersonStore();
		doctor.selDoctorData=v;
		uni.navigateTo({
			url: '/pages/appointmentRegister/doctorInfo/doctorInfo'
		})
	}
	onMounted(() => {
		console.log(gasyData.selRoomData);
		console.log(gasyData.selRoomData.departmentName)
	})
</script>

<style scoped="" lang="less">
	.gastrology {
		margin: 30rpx 20rpx 30rpx 30rpx;

		.week {
			width: 678rpx;
			height: 272rpx;
			border: 1px solid #f2f2f3;
			display: flex;
			align-items: space-between;
			justify-content: space-around;
			border-radius: 4rpx;

			.week-day {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				width: 76rpx;
				padding: 40rpx 0;

				// height: 88rpx;
				text {
					font-size: 30rpx;
					color: #acacac;
				}

				.data {
					width: 74rpx;
					height: 86rpx;
					border-radius: 27rpx;
					background-color: #e6f1ff;
					color: #5b5d61;
					font-size: 34rpx;
					text-align: center;
					line-height: 74rpx;
				}

				.active {
					background-color: #006eff;
					color: #fff;
				}
			}
		}

		.doctor {
			margin: 54rpx 0;
			font-size: 25rpx;
		}

		.doctor-box {
			width: 678rpx;
			border: 1px solid #f2f2f3;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding: 20rpx 0;

			.doctor-top {
				display: flex;
				align-items: flex-start;
				justify-content: flex-start;
				border-bottom: 2px #f4f4f4 solid;
				padding: 20rpx 0;

				image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 6rpx;
					margin: 0 22rpx;
				}

				.content {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;

					view {
						font-size: 36rpx;
						color: #313131;
						padding-bottom: 28rpx;

						text {
							font-size: 26rpx;
							color: #6f6f6f;
							margin-left: 10rpx;
						}
					}

					text {
						font-size: 26rpx;
						color: #cfcfcf;
					}
				}
			}
		}

		.doctor-bottom {
			.end {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding: 20rpx 0;

				.price {
					font-size: 26rpx;
					color: #f45b5b;
				}

				.remain {
					width: 150rpx;
					height: 86rpx;
					background-color: #006eff;
					color: #fff;
					font-size: 30rpx;
					text-align: center;
					line-height: 86rpx;
					margin: 0 30rpx;
					padding: 0;
				}
			}
		}
	}

	.title {
		font-size: 34rpx;
		text-align: center;
		margin: 44rpx 0;
	}

	.tag {
		font-size: 22rpx;
		color: #7b7c7c;
		margin: 22rpx 0 40rpx 22rpx;
	}

	.before {
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
		margin: 22rpx 12rpx;

		.box {
			width: 188rpx;
			height: 70rpx;
			background-color: #f1f7ff;
			color: #0f63ff;
			font-size: 20rpx;
			text-align: center;
			line-height: 70rpx;
			margin: 6px;
		}

		.disabled {
			width: 188rpx;
			height: 70rpx;
			background-color: #f2f2f2;
			color: #a1a7ba;
			font-size: 20rpx;
			text-align: center;
			line-height: 70rpx;

		}
	}
</style>
